+<!--
 * @Descripttion: WoShop商城
 * @Copyright: 武汉一一零七科技有限公司©版权所有
 * @Author: 梧桐
 * @Link: www.wo-shop.net
 * @Contact: QQ:2487937004
 * @LastEditors: 梧桐
 * @LastEditTime: 2020-11-13 03:22:14
-->
<template>
<div>
    <wxc-popup popup-color="rgba(0, 0, 0,0)" :show="isShow" height="280" @wxcPopupOverlayClicked="popupOverlayHideClick('setting')" ref="setting" pos="bottom">
        <div class="toolContent">
            <text class="toolTit"> 设置</text>
            <text class="colorGrey"> 开播设置</text>
            <div class="tooItem" @click="openLiveDesc">
                <text class="toolLeft ">直播间简介</text>
                <div class="toolRight">
                    <text class="colorWhite rightAddText">添加</text>
                    <wxc-icon name="more" @wxcIconClicked="clicked" size="xs"></wxc-icon>
                </div>
            </div>
            <text class="colorGrey">开播预告</text>
            <div class="tooItem" @click="openTime">
                <text class="toolLeft  ">预告直播时间</text>
                <div class="toolRight">
                    <text class="colorWhite rightAddText">添加</text>
                    <wxc-icon name="more" @wxcIconClicked="clicked" size="xs"></wxc-icon>
                </div>
            </div>

        </div>
    </wxc-popup>
    <wxc-popup popup-color="rgb(255,255,255)" :show="isDescShow" ref="descPopup" @wxcPopupOverlayClicked="popupOverlayDescClick" pos="bottom" height="320">
        <div class="descWrap">
            <text class="descTit">直播间简介</text>

                <div class="editWrap">
                    <div>
                        <textarea class="textarea" v-model="descText"  @blur="onblur"></textarea>
                    </div>

                    <div class="saveDescButton" @click="wxcButtonClicked">
                      <text class="saveDescButtonText">保存并修改</text>
                    </div>
                </div>

        </div>
    </wxc-popup>

    <wxc-popup popup-color="rgba(0, 0, 0,0.3)" ref="timePopup" :show="isTimeShow" height="320" @wxcPopupOverlayClicked="popupOverlayTimeClick()" pos="bottom">
        <div class="toolContent">
            <text class="liveProTime ">预告直播时间</text>
            <div class="selectTimeWrap">
                <text class="pickTimeBtn" @click="pickTime">选择时间</text>
                <text class="timeValue">{{timeValue}}</text>
            </div>

            <scroller class="scroller" scroll-direction="horizontal">
                <div v-for="(date, index) in weekList" :key="index" @click="selectWeek(date)">
                    <text class="weekName" :class="{weekActive:date.isSelect===true}">{{date.date}}</text>
                </div>
            </scroller>

          <div @click="timeSubmit"  class="submitBtn" >
            <text class="submitBtnText">提交</text>
          </div>
        </div>
    </wxc-popup>
</div>
</template>

<script>
import liveJS from '../live'
import {WxcButton, WxcIcon, WxcPopup,} from "weex-ui"

const modal = weex.requireModule('modal')
const picker = weex.requireModule('picker')
export default {
    name: 'settingPop',
    mixins: [liveJS],
    data() {
        return {
            isDescShow: false,
            isTimeShow: false,
            isEditShow: false,
            timeValue: '',
            descText: '',
            weekList: [{
                    isSelect: false,
                    date: '每周日'
                },
                {
                    isSelect: false,
                    date: '每周一'
                },
                {
                    isSelect: false,
                    date: '每周二'
                },
                {
                    isSelect: false,
                    date: '每周三'
                },
                {
                    isSelect: false,
                    date: '每周四'
                },
                {
                    isSelect: false,
                    date: '每周五'
                },
                {
                    isSelect: false,
                    date: '每周六'
                },

            ],
            timeTemList: []
        }
    },
    props: {
        isShow: {
            type: Boolean,
            required: false,
            default: false,
        }
    },
    components: {
        WxcPopup,
        WxcIcon,
        WxcButton,

    },
    mounted() {
        this.userAvatar = JSON.parse(uni.getStorageSync("userInfo")).headimgurl;
        this.descText = '想要说的话'
    },
    methods: {

        popupOverlayHideClick(e) {

          this.$parent.isSettingShow = false
           this.$parent.isShowMessage=true
            this.isDescShow = false
        },
        popupOverlayDescClick() {
            this.isDescShow = false
            this.$refs.descPopup.hide()
          this.$parent.isShowMessage=true
        },
        openLiveDesc() {
            this.isShow = false
            this.isDescShow = true
        },
        openTime() {
            this.isShow = false
            this.isTimeShow = true
        },
        popupOverlayTimeClick() {
            this.isTimeShow = false
            this.$refs.timePopup.hide()
          this.$parent.isShowMessage=true
        },
        onblur(event) {

            this.descText = event.detail.value
        },
        pickTime() {
            picker.pickTime({
                value: this.timeValue
            }, event => {
                if (event.result === 'success') {
                    this.timeValue = event.data
                    this.timeTemList.push(event.data)
                    console.log('this.timeTemList: ', this.timeTemList);
                }
            })
        },
        selectWeek(e) {
            e.isSelect = !e.isSelect
            let arr = this.weekList.filter(res => res.isSelect == true).map(name => name.date)
            arr.forEach(e => {
                if (this.timeTemList.includes(e)) return;
                this.timeTemList.push(e)
            });

        },
        subMit(data) {

            this.http('api/Live/submitLiveParams', data).then(res => {
                if(this.isDescShow){
                  this.$refs.descPopup.hide()
                }
                if(this.isTimeShow){

              this.$refs.timePopup.hide()
                }
              modal.toast({
                message: res.data.mess,
                duration: 1
              })

            })
        },
        //提交直播间时间
        timeSubmit() {
            const liveID = uni.getStorageSync('openLiveID');
            const time = this.timeTemList
          if(!liveID){
            return modal.toast({
              message: '请选择开播时间'
            })
          }
          if(time.length===0){
            return modal.toast({
              message: '请选择开播周期'
            })
          }
            let data = {
                shop_id: uni.getStorageSync('openLiveID'),
                notice_time: this.timeTemList.join(',')
            }
            this.subMit(data)
        },
        //提交直播间简介
        wxcButtonClicked() {
            const data = {
                live_desc: this.descText,
                shop_id: uni.getStorageSync('openLiveID'),
            }
            this.subMit(data)
        }
    }
}
</script>

<style scoped>

.tooItem {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 36upx;
    padding: 36upx 0;
    border-color: #222;
    border-style: solid;
    border-bottom-width: 2upx;
}

.colorWhite {
    color: #fff;
    font-size: 24upx;
}

.colorGrey {
    color: #999;
    font-size: 24upx;
    font-weight: 600;
}

.colorContent {
    color: #333;
    font-size: 28upx;
    font-weight: 500;
    line-height: 36upx;
}

.tipText {
    margin-top: 20upx;
    color: #666;
}

.toolContent {
    padding: 25upx;
    border-top-right-radius: 24upx;
    border-top-left-radius: 24upx;
    background-color: rgba(0, 0, 0, 0.7);
    padding-bottom: 40upx;
    width:750upx
}

.toolLeft {
    font-size: 32upx;
    font-weight: 600;
    color: #fff;
    margin-top: 14upx;
}

.toolTit {
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 34upx;
    margin: 10upx 0 40upx 0;
}

.radius {
    border-radius: 20upx;
    overflow: hidden;
}

.toolRight {
    flex-direction: row;
    align-items: center;
}

.rightAddText {
    font-size: 30upx;
    color: #666;
}

/**直播间介绍 **/
.descWrap {
    padding: 30upx;
    width:750upx
}

.descTit {
    font-size: 30upx;
    font-weight: 600;
    text-align: center;
}

.descCheckRow {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 30upx;
    border-style: solid;
    border-width: 2upx;
    border-color: transparent;
    border-bottom-color: #f5f5f5;
    border-top-color: #f5f5f5;
    padding: 20upx 0;
}

.avatar {
    width: 100upx;
    height: 100upx;
    border-radius: 200px;
    margin-bottom: 20upx;
}

.editWrap {
    padding-top: 30upx;
}

.textarea {
    font-size: 32upx;
    font-weight: 600;
    height: 220upx;
}

.liveProTime {
    font-size: 32upx;
    color: #fff;
    text-align: center;
}

.selectTimeWrap {
    padding: 40upx 40upx 0;
    align-items: center;
}

.pickTimeBtn {
    font-size: 38upx;
    color: #888;
    font-weight: 500;
    padding: 12upx;
    /* margin: 0 auto; */
    text-align: center;
    margin-top: 40upx;
    border-width: 2upx;
    border-color: #888;
    border-style: solid;
    width: 240upx;
    border-radius: 8upx;
}

.timeValue {
    font-size: 48upx;
    color: #fff;
    font-weight: 600;
    margin-top: 30upx;
}

.scroller {
    flex-direction: row;
    margin: 40upx 0;
  width: 750upx;
}

.weekName {
    color: #999;
    font-size: 30upx;
    font-weight: 500;
    border: 2upx solid #999;
    border-width: 1upx;
    border-color: #888;
    border-style: solid;
    padding: 6upx 14upx;
    border-radius: 4upx;
    margin: 0 8upx;
}
.weekActive{
  color: #05FF80;
  border-style: solid;
  border-color: #05FF80;
  border-width: 2upx;
}
.submitBtn{
    width: 700upx;
  margin-top: 20upx;
    text-align: center;
  background-color: #ffd609;
  padding: 24upx 0;
  border-radius: 8upx;
}
.submitBtnText{
  color:#fff;
  text-align: center;
}
.toolRightItemCircle {
  width: 34upx;
  height: 34upx;
  border-width: 3upx;
  border-style: solid;
  border-color: #999;
  margin-left: 20upx;
  margin-right: 4upx;
  border-radius: 200px;
}
.saveDescButton{
  width: 700upx;
  background-color: #FEC003;
  color: #fff;
  padding:26upx 0 ;
  border-radius: 8upx;

}
.saveDescButtonText{
  text-align: center;
  font-size: 28upx;
  font-weight: 600;
  color: #333;
}

</style>
